<template>
	<view class="container">
		<view style="height:23vh">
			<view class="nav_bar">
				<view class="safe-area" :style="{ height: statusBarHeight + 'px' }"></view>
				<view class="content">
					<view class="top">
						分类
					</view>
					<!-- <van-search :value="searchData" shape="round" background="#0000000" placeholder="请输入搜索关键词" /> -->
					<view class="search">
						<view class="inner" @click="toSearch">
							<van-icon name="search" />
							<view class="txt">
								请输入关键词搜索
							</view>
						</view>
					</view>
				</view>
			</view>
			<scroll-view scroll-x class="scroll" :scroll-left="left" :scroll-with-animation="true" enhanced :show-scrollbar="false">
				<view class="item" :class="activeIndex == index ? 'active' : ''" v-for="(item, index) in categoryList" :key="item.id"
					@click="showThreeCategory(index)">
					<view class="pic">
						<!-- <view class="image"></view> -->
						<image :src="item.imgUrl" mode="aspectFill"></image>
					</view>
					<view class="txt van-ellipsis">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>

		<view class="category">
			<view class="left">
				<van-sidebar :active-key="activeThreeCategory">
					<van-sidebar-item :title="item.name" v-for="(item, index) in threeCategoryList" :key="item.id" @click="changeThreeCategory(index)" />
				</van-sidebar>
			</view>
			<view class="right">
				<view class="top_select">
					<view class="content">
						<view class="txt" @click="changeSort('price')">
							<text :class="filter > 0 && filter < 3 ? 'active' : ''">价格</text>
							<view class="pic">
								<image src="/static/category/sort0.png" mode="aspectFill" v-if="filter == 0 || filter == 3"></image>
								<image src="/static/category/sort1.png" mode="aspectFill" v-if="filter == 1"></image>
								<image src="/static/category/sort2.png" mode="aspectFill" v-if="filter == 2"></image>
							</view>
						</view>
						<view class="txt" @click="changeSort('xiaoliang')">
							<text :class="filter == 3 ? 'active' : ''">销量</text>
						</view>
					</view>
				</view>
				<view class="list">
					<scroll-view scroll-y style="height: calc(77vh - 184rpx);" enhanced :show-scrollbar="false" @scrolltolower="scrolltolower"
						:scroll-with-animation="true" refresher-enabled @refresherrefresh="pulldownRefresh" :refresher-triggered="refreshStatus">
						<ShopCard type="small" style="margin-bottom: 20rpx;" v-for="(item, index) in categoryGoodsList" :key="item.id" :ecCommodityId="item.id"
							:ecCommodityType="item.type" :sellout="item.releaseStock === 0" @click.native="toDetail(item.id, item.releaseStock)"
							@refreshPage="pulldownRefresh" :animationStatus="start" @clickAddBtn="clickAddBtn">
							<template #pic>
								<block>
									<image :src="item.images" mode="aspectFill"></image>
								</block>
							</template>
							<template #title>
								<block>{{ item.name }}</block>
							</template>
							<template #subtitle2>
								<block>规格：{{ item.standard }} * {{ item.normsInfo }}</block>
							</template>
							<template #price>
								<block>
									<PriceFont color="#FF4F30" bigSize="40rpx" smallSize="28rpx" :price="permissionStatus == '1' ? item.normsPrice
                  : '??.??'" />
								</block>
							</template>
						</ShopCard>
						<uni-load-more :status="loading"></uni-load-more>
					</scroll-view>

				</view>
			</view>
		</view>
		<view class="to_car">
			<!-- <view class="pic">
				<image src="/static/tabbar/shopcar.png" mode="aspectFill"></image>
			</view> -->
			<view class="pic" @click="toCarPage">
				<image :src="allCount != 0 ? '/static/tabbar/shopcar_active.png' : '/static/tabbar/shopcar.png'" mode="aspectFill" id="car">
				</image>
				<view class="point" v-if="allCount != 0">{{ allCount }}</view>
			</view>
			<PriceFont color="#FF4F30" bigSize="48rpx" smallSize="32rpx" :price="allMoney" />
			<view class="btn" :class="allCount != 0 ? 'active' : ''" @click="toCarPage">
				去下单
			</view>
		</view>
		<view class="btncar" :class="start ? 'move':''" :style="{top:curPos.top + 'px',left:curPos.left  + 'px',transform:xMove}">
			<view class="box" :class="start ? 'move':''" :style="{transform:yMove}">
				<van-icon name="shopping-cart-o" size="36rpx" />
			</view>
		</view>
	</view>
</template>

<script>
	//写在page外
	var screenWidth = wx.getSystemInfoSync().windowWidth;
	let itemWidth = screenWidth / 5.5; //表示窗口横排显示5个item
	import { reqCategoryTwo, reqGoodsListByCategory } from "@/apis/goods.js"
	import app from '@/App.vue'
	import { mapGetters } from 'vuex'
	import addCarAniMix from '@/utils/addCarAniMix';
	export default {
		mixins:[addCarAniMix],
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				activeThreeCategory: -1,
				activeIndex: -1,
				categoryList: [],
				threeCategoryList: [],
				left: 0,
				level2id: '',
				filter: 0,
				page: {
					pageSize: 15,
					pageNum: 1,
					total: 0
				},
				loading: "loading",
				categoryGoodsList: [],
				refreshStatus: false,
			}
		},
		computed: {
			...mapGetters('car', ['allMoney', 'allCount']),
			...mapGetters('user', ['permissionStatus']),
		},
		onLoad(params) {
			this.level2id = params?.id;
			this.getCategoryTwo();
			const query = wx.createSelectorQuery()
			query.select("#car").boundingClientRect((res) => {
				this.targetPos = {top: res.top,left: res.left}
			}).exec();
		},
		// onShow(){
		// 	this.activeThreeCategory = -1;
		//    this.activeIndex = -1;
		// 	this.categoryList = [];
		//    this.threeCategoryList = [];
		// 	this.getCategoryTwo();
		// },
		methods: {
			// 二级分类接口
			async getCategoryTwo() {
				let res = await reqCategoryTwo();
				if (res.code === 200) {
					this.categoryList = res.data;
					console.log('this.level2id', this.level2id);
					if (this.level2id) {
						let index = this.categoryList.findIndex(item => item.id == this.level2id);
						this.showThreeCategory(index);
					} else {
						this.showThreeCategory(0);
					}
					this.level2id = "";
				}
			},
			pulldownRefresh() {
				this.refreshStatus = true;
				this.page.pageNum = 1;
				this.categoryGoodsList = [];
				this.loading = "loading";
				this.getGoodsByCategory();
			},
			scrolltolower() {
				console.log("到底部了")
				if (this.loading == "noMore") {
					return;
				}
				this.page.pageNum++;
				this.loading = "loading";
				this.getGoodsByCategory();
			},
			// 根据三级分类查询商品信息
			async getGoodsByCategory() {
				let { pageNum, pageSize } = this.page;
				let { filter } = this;
				if (this.threeCategoryList == null) {
					this.loading = "noMore";
					return;
				}
				let categoryId = this.threeCategoryList[this.activeThreeCategory]?.categoryId;
				let res = await reqGoodsListByCategory({ pageNum, pageSize, filter, categoryId });
				if (res.code === 200) {
					const data = res.data
					// 数组去重
					let arr = [...this.categoryGoodsList, ...data.list];
					const map = new Map();
					const newArr = arr.filter(v => !map.has(v.id) && map.set(v.id, v));
					this.categoryGoodsList = newArr;
					// this.categoryGoodsList = [...this.categoryGoodsList, ...data.list]
					if (res.data.isLastPage) {
						this.loading = "noMore"
					}
					this.refreshStatus = false;
				}
			},
			changeThreeCategory(index) {
				if (index === this.activeThreeCategory) return;
				this.clearParams();
				this.activeThreeCategory = index;
				this.getGoodsByCategory();
			},
			showThreeCategory(index) {
				if (index === this.activeIndex) return;
				this.clearParams();
				this.activeThreeCategory = 0;
				this.activeIndex = index;
				this.threeCategoryList = this.categoryList[index].children;
				// 获取三级分类商品
				this.getGoodsByCategory();
				this.scrollLeft();
			},
			clearParams() {
				this.filter = 0;
				this.categoryGoodsList = [];
				this.page = { pageNum: 1, pageSize: 15 };
				this.loading = "loading";
			},
			//点击item时调用scrollLeft方法
			scrollLeft() {
				let tabList = this.categoryList;
				let tabIndex = this.activeIndex;
				let scrollX = itemWidth * tabIndex - itemWidth * 2.5;
				let maxScrollX = (tabList.length + 1) * itemWidth;
				if (scrollX < 0) {
					scrollX = 0;
				} else if (scrollX >= maxScrollX) {
					scrollX = maxScrollX;
				}
				this.left = scrollX;
			},
			changeSort(type) {
				if (type == 'price') {
					this.filter = this.filter == 3 ? 0 : this.filter;
					this.filter = this.filter == 2 ? 0 : this.filter + 1;
				} else {
					this.filter = this.filter == 3 ? 0 : 3;
				}
				this.categoryGoodsList = [];
				this.page = { pageNum: 1, pageSize: 15 };
				this.loading = "loading";
				this.getGoodsByCategory();
			},
			toDetail(id, releaseStock) {
				if (releaseStock == 0) {
					uni.utils.toast("商品已售罄");
					return;
				}
				uni.navigateTo({ url: `/packageA/pages/goodsDetail/goodsDetail?id=${id}` })
			},
			toCarPage() {
				if (this.allCount == 0) return;
				uni.switchTab({ url: '/pages/shopCar/shopCar' })
			},
			toSearch() {
				uni.navigateTo({ url: '/packageA/pages/searchPage/searchPage' })
			},
		},
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}

	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.scroll ::-webkit-scrollbar {
		width: 0 !important;
		height: 0 !important;
		color: transparent !important;
		display: none !important;
	}
</style>
<style scoped lang="scss">
	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.container {
		display: flex;
		height: 100vh;
		flex-direction: column;
	}

	.nav_bar {
		background-color: #fff;

		.content {
			padding-left: 24rpx;
			display: flex;
			align-items: center;
			height: 92rpx;

			.top {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				margin-right: 16rpx;
			}

			.search {

				.inner {
					width: 436rpx;
					height: 60rpx;
					padding-left: 24rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					border-radius: 50rpx;
					background-color: #fff;
					border: 1px solid #FF1642;
				}

				.txt {
					font-size: 28rpx;
					color: #808080;
					margin-left: 18rpx;
				}
			}

			// /deep/ .van-search {
			// 	padding: 0;

			// 	.van-search__content {
			// 		border: 1px solid #FF1642;
			// 		background-color: #fff;
			// 		// height: 64rpx;
			// 		width: 412rpx;
			// 	}
			// }
		}

	}

	.scroll {
		width: 100%;
		box-sizing: border-box;
		white-space: nowrap;
		padding: 0 8rpx;
		// height: 162rpx;
		margin-bottom: 10rpx;
		margin-top: 20rpx;

		.item {
			margin: 0 16rpx;
			height: 130rpx;
			width: 105rpx;
			display: inline-block;
			text-align: center;

			&.active {
				.pic {
					background-color: #FF1642 !important;
				}

				.txt {
					color: #FFFFFF !important;
					background: #FF1642;
					border-radius: 15rpx;
					height: 30rpx;
				}
			}

			.pic {
				width: 88rpx;
				height: 88rpx;
				padding: 4rpx;
				box-sizing: border-box;
				margin: 0 auto;
				margin-bottom: 6rpx;
				border-radius: 50%;
				background-color: #fff;

				image {
					width: 100%;
					height: 100%;
					background-color: #eee;
					border-radius: 50%;
				}
			}

			.txt {
				width: 100rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #333333;
				display: inline-block;
				text-align: center;
			}
		}
	}

	.category {
		display: flex;
		flex: 1;

		.left {
			height: calc(77vh - 100rpx);
			overflow-y: scroll;
			overflow-x: hidden;
			width: 190rpx;

			/deep/ .van-sidebar {
				width: 100%;
			}

			/deep/ .van-sidebar-item {
				padding: 24rpx !important;
				line-height: 40rpx !important;
				text-align: center;
				background-color: #f5f5f5;
				font-size: 24rpx;
			}

			/deep/ .van-sidebar-item--selected {
				line-height: 40rpx !important;
				color: #FF1642;
				background-color: #fff;
				border-color: #FF1642;
			}
		}

		.right {
			width: 100%;
			background-color: #fff;
			box-sizing: border-box;

			.top_select {
				width: 100%;
				height: 84rpx;
				padding: 0 14rpx;
				box-sizing: border-box;

				.content {
					display: flex;
					align-items: center;
					padding: 0 10rpx;
					height: 100%;

					.txt {
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #808080;

						&:nth-child(1) {
							margin-left: auto;
						}

						text {
							&.active {
								color: #333333;
							}
						}
					}

					.pic {
						width: 26rpx;
						height: 26rpx;
						margin: 0 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.list {
				height: calc(77vh - 184rpx);
				padding: 0 14rpx;
				overflow: scroll;
				box-sizing: border-box;
			}
		}
	}

	.to_car {
		height: 100rpx;
		width: 750rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

		.pic {
			width: 52rpx;
			height: 52rpx;
			position: relative;

			.point {
				position: absolute;
				top: -5rpx;
				right: -5rpx;
				font-weight: 500;
				font-size: 16rpx;
				color: #FFFFFF;
				width: 20rpx;
				height: 20rpx;
				background-color: #FF3030;
				border-radius: 50%;
				text-align: center;
				line-height: 20rpx;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.btn {
			margin-left: auto;
			width: 200rpx;
			height: 76rpx;
			border-radius: 38rpx;
			font-weight: 600;
			font-size: 32rpx;
			line-height: 76rpx;
			text-align: center;
			color: #808080;
			background: #DDDDDD;

			&.active {
				background: #ff1642;
				color: #fff;
			}
		}
	}

	.btncar {
		position: fixed;
		z-index: 2000;
		width: 48rpx;
		height: 48rpx;
		color: #fff;
		transition-timing-function: linear;

		.box {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background-color: #FF1642;
			transition-timing-function: cubic-bezier(0.5, -1, 1, 1)
		}
	}

	.move {
		transition: all 0.6s;
	}
</style>